<template>
  <div class="interface-show">
    <el-row>
      <!--分组管理-->
      <el-col :span="5">
        <group v-on:getApi="getApi"></group>
      </el-col>
      <!--页面详情-->
      <el-col :span="19">
        <div class="interface-title">
          <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 8px;margin-right: 8px">
            <!--详情-->
            <el-tab-pane label="预览" name="first">

              <!--接口信息展示-->
              <h3 class="interface-title-1">接口信息</h3>

              <el-form ref="form" label-width="100px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="接口编号：">
                      <span>{{InterfaceForm.id}}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item label="接口名称：">
                      <span>{{InterfaceForm.name}}</span>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="10">
                    <el-form-item label="接口状态：">
                      <el-tag v-if="InterfaceForm.status == 0" type="warning" size="medium">未完成</el-tag>
                      <el-tag v-else-if="InterfaceForm.status == 1" size="medium">已完成</el-tag>
                      <el-tag v-else-if="InterfaceForm.status == 2" type="danger" size="medium">已关闭</el-tag>
                    </el-form-item>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item label="更新时间：">
                      <label>{{InterfaceForm.updateTime }}</label>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row>
                  <el-col :span="10">
                    <el-form-item label="添加人员：">
                      <label>{{InterfaceForm.author}}</label>
                    </el-form-item>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item label="接口路径：">
                      <el-tag v-if="InterfaceForm.method =='GET'" size="medium" type="primary">GET</el-tag>
                      <el-tag v-else-if="InterfaceForm.method =='POST'" size="medium" type="success">POST</el-tag>
                      <el-tag v-else-if="InterfaceForm.method =='PUT'" size="medium" type="warning">PUT</el-tag>
                      <el-tag v-else-if="InterfaceForm.method =='DELETE'" size="medium" type="danger">DELETE</el-tag>
                      <span style="color: #353535;letter-spacing: 1px;">{{InterfaceForm.path}}</span>

                      <el-tooltip class="item" effect="dark" content="复制接口路径" placement="top-start">
                        <i style="padding-left:10px" class="el-icon-document-copy" @click="copy(InterfaceForm.path)"></i>
                      </el-tooltip>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="接口描述：">
                      <label style="font-size: 14px;width: 500px">{{InterfaceForm.description}}</label>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>

              <!--接口请求类型-->
              <h3 class="interface-title-1">request</h3>
              <div style="display: block;text-align: center">
                <el-radio-group v-model="InterfaceForm.requestType">
                  <el-radio disabled label='form'>form</el-radio>
                  <el-radio disabled label='json'>json</el-radio>
                  <el-radio disabled label='file'>file</el-radio>
                  <el-radio disabled label='row'>row</el-radio>
                </el-radio-group>
              </div>

              <!--请求参数-->
              <div class="interface-info-request">
                <i class="el-icon-success"></i>
                <span style="color: #353535;font-size: 14px">请求参数：</span>
                <el-table :data="InterfaceForm.params" border class="interface-request" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'37px'}">
                  <el-table-column prop="name" min-width="14" label="参数名"></el-table-column>
                  <el-table-column prop="must" min-width="12" label="是否必输" :formatter="formatBoolean"></el-table-column>
                  <el-table-column prop="value" min-width="22" label="示例"></el-table-column>
                  <el-table-column prop="remark" min-width="25" label="描述"></el-table-column>
                </el-table>
              </div>

              <!--公共参数-->
              <div style="padding-top:20px" class="interface-info-request">
                <i class="el-icon-success"></i>
                <span style="color: #353535;font-size: 14px">公共参数</span>
                <el-table :data="InterfaceForm.commonParams" border class="interface-request" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'37px'}">
                  <el-table-column prop="name" min-width="14" label="参数名"></el-table-column>
                  <el-table-column prop="must" min-width="12" label="是否必输" :formatter="formatBoolean"></el-table-column>
                  <el-table-column prop="value" min-width="22" label="示例"></el-table-column>
                  <el-table-column prop="remark" min-width="25" label="描述"></el-table-column>
                </el-table>
              </div>

              <!--请求headers-->
              <div style="padding-top: 20px" class="interface-info-request">
                <i class="el-icon-success" style="padding-left: 8px"></i>
                <span style="color: #353535;font-size: 14px">请求Headers：</span>
                <el-table :data="InterfaceForm.headers" border class="interface-request" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
                  <el-table-column prop="name" min-width="14" label="参数名"></el-table-column>
                  <el-table-column prop="must" min-width="12" label="是否必输" :formatter="formatBoolean"></el-table-column>
                  <el-table-column prop="value" min-width="22" label="示例"></el-table-column>
                  <el-table-column prop="remark" min-width="25" label="描述"></el-table-column>
                </el-table>
              </div>

              <!--请求cookies-->
              <div style="padding-top: 20px" class="interface-info-request">
                <i class="el-icon-success" style="padding-left: 8px"></i>
                <span style="color: #353535;font-size: 14px">请求Cookies：</span>
                <el-table :data="InterfaceForm.cookies" border class="interface-request" :header-cell-style="{'background-color':'#f2f2f2','font-weight':'400','color':'#272626','heigth':'39px'}">
                  <el-table-column prop="name" min-width="14" label="参数名"></el-table-column>
                  <el-table-column prop="must" min-width="12" label="是否必输" :formatter="formatBoolean"></el-table-column>
                  <el-table-column prop="value" min-width="22" label="示例"></el-table-column>
                  <el-table-column prop="remark" min-width="25" label="描述"></el-table-column>
                </el-table>
              </div>

              <h3 class="interface-title-1">respone</h3>
              <el-tabs type="border-card">
                <el-tab-pane label="成功示例">
                  <json-view :data="json.successJson" icon-style="square" theme="one-dark" :font-size="13" :line-height="22" :deep="2" />
                </el-tab-pane>
                <!-- <el-tab-pane label="失败示例">
                  <json-view :value="json.failedJson" copyable sort icon-style="square" theme="vs-code" :font-size="13" :line-height="22" :expand-depth="2" />
                </el-tab-pane> -->
              </el-tabs>

            </el-tab-pane>
            <!--编辑-->
            <el-tab-pane label="编辑" name="second">
              <interfaceEdit ref="interfaceEdit"></interfaceEdit>
            </el-tab-pane>
            <!--调试-->
            <el-tab-pane label="接口调试" name="third">
              <interfaceDebug ref="interfaceDebug" v-on:getInterfaceInfo="getApi"></interfaceDebug>
            </el-tab-pane>
            <!--mock-->
            <el-tab-pane label="接口mock" name="fourth"></el-tab-pane>
          </el-tabs>

        </div>

      </el-col>
    </el-row>

  </div>
</template>


<script>
import { getApi } from '@/api/api'
import { formatDate } from "@/utils/dataUtil";
import { isNull, isEmpty } from "@/utils/baseUtil";
import group from '../group/groupManager'
import interfaceEdit from './interfaceEdit'
import interfaceDebug from './interfaceDebug'
import jsonView from "vue-json-views";

export default {
  data () {
    return {
      activeName: 'first',

      InterfaceForm: {
        projectId: "",
        groupId: "",
        interfaceId: "",
        commonParams: [],
        params: [],
        headers: [],
        author: "",
      },
      interfaceGroup: {
        list: []
      },

      json: {
        theme: "one-dark",
        fold: "false",
        deep: 3,
        icon: "square",
        font: 13,
        line: 22,
        result: "",
        successJson: {},
        failedJson: {},
      }

    }

  },

  methods: {
    //获取接口信息
    getApi (projectId, apiGroupId, id, pageIndex, pageSize) {
      getApi(projectId, apiGroupId, id, pageIndex, pageSize).then(resp => {

        if (resp.code == 200) {
          this.InterfaceForm = resp.data.records[0]

          this.InterfaceForm.params = isNull(resp.data.records[0]["params"]) ? [] : JSON.parse(resp.data.records[0]["params"]);
          this.InterfaceForm.commonParams = isNull(resp.data.records[0]["commonParams"]) ? [] : JSON.parse(resp.data.records[0]["commonParams"]);
          this.InterfaceForm.headers = isNull(resp.data.records[0]["headers"]) ? [] : JSON.parse(resp.data.records[0]["headers"]);
          this.InterfaceForm.cookies = isEmpty(resp.data.records[0]["cookies"]) ? [] : JSON.parse(resp.data.records[0]["cookies"]);

          this.json.successJson = isNull(resp.data.records[0]["response"]) ? {} : JSON.parse(resp.data.records[0]["response"]);
          this.$store.commit('SET_INTERFACEINFO', this.InterfaceForm)


        }
      })
    },

    //复制功能
    copy (data) {
      let oInput = document.createElement('input'); //js创建一个input输入框
      oInput.value = data;   //将需要复制的文本赋值到创建的input输入框中
      document.body.appendChild(oInput); // 将输入框暂时创建到实例里面
      oInput.select(); // 选择输入框内容
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$message({
        message: '复制成功',
        type: 'success'
      });
      oInput.remove()  // 最后删除实例中临时创建的input输入框，完成复制操作
    },

    //布尔值格式化：cellValue为后台返回的值
    formatBoolean: function (row, column, cellValue) {
      var ret = ''  //你想在页面展示的值
      if (cellValue) {
        ret = "是"  //根据自己的需求设定
      } else {
        ret = "否"
      }
      return ret;
    },


    handleClick () {

    }
  },

  watch: {
    //当interfaceGroup中点击菜单时
    InterfaceForm (val, oldVal) {
      //普通的watch监听
      //更新子组件数据
      this.$refs.interfaceEdit.updateInterfaceInfo(this.InterfaceForm);
      this.$refs.interfaceDebug.updateInterfaceInfo(this.InterfaceForm);
      console.log("Interface.vue  watch   InterfaceForm 数据变更！");
    }
  },

  mounted () {
    this.InterfaceForm.interfaceId = this.$route.params.interface_id;
    //获取接口信息
    this.getApi('', '', this.InterfaceForm.interfaceId, 1, 30)
    //获取接口分组
    this.interfaceGroup.list = this.$store.state.apiGroup;


  },


  components: {
    group,
    interfaceEdit,
    interfaceDebug,
    jsonView

  },

  //   format (time) {
  //     var date = new Date(time)
  //     return formatDate(date, 'yyyy-MM-dd hh:mm')
  //   }
}
</script>


<style scoped>
.interface-show {
  height: 100%;
}

.interface-show >>> .el-row {
  height: 100%;
  margin-bottom: 5px;
}

.interface-show >>> .el-col {
  height: 100%;
}

.interface-show .interface-title {
  margin-left: 1px;
  background-color: #fff;
  height: 100%;
  margin-top: 2px;
}

.interface-show .interface-title-1 {
  clear: both;
  font-weight: 400;
  margin-top: 0.4rem;
  border-left: 3px solid #2395f1;
  padding-left: 8px;
  display: inline-block;
}

.interface-show .interface-info-request >>> .el-table th {
  padding: 6px 0;
}

.interface-show .interface-info-request >>> .el-table__row td {
  padding: 6px 0;
}
</style>